
  <head>
    <title>My chromeRadio Library</title>
    <script type="text/javascript" src="js/storage.js">
    </script>
    <script type="text/javascript" src="js/search.js">
    </script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js">
    </script>
    <link rel="stylesheet" href="css/cupertino/jquery-ui-1.8rc3.custom.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <style type="text/css" media="screen">
	
	  body{
		font-size: 13px;
	  }
	  
	  h1
	  {
		font-size:20px;
	  }
	  
	  .controls_table
	{	
		background: #EEE;
		margin-top: 15px;
		border: 1px solid #CCC;
		padding: 3px;
	}

	.search_div
	{
		float: right;
		background: #dbedf9;
		margin-bottom: 10px;
		border: 1px solid #CCC;
		padding: 3px;
		padding-left: 8px;
		font-weight: bold;
	}	
	

      #allNone {
          width: 20px;
      }
      
      .line1 {
          border: 1px solid #aed0ea; background: #deedf7; color: #222222; 
      }
	  
	  .line1 a, .line2 a
	  {
		text-decoration:none;
	  }
      
      .line2 {
         color: #362b36; 
		 border: 1px solid #aed0ea;
      }
	  
	  #controls_table_wrapper
	  {
		background: #dbedf9;
		border: 1px solid #CCC;
		width: 100%;
		margin-top:5px;
	  }
	  
	  #player-wrapper
	  {
		background: #dbedf9;
		border: 1px solid #CCC;
		padding:5px;
		margin-top:5px;
		height: 32px;
		margin-bottom: 5px;
	  }
	  #my-radio-player-div
	  {
		float:left;
		padding-right: 10px;
	  }
	  #my-radio-player-current-url
	  {
		font-size: 18px;
		font-family: sans-serif;
	  }
	 
	  table
	  {
	    border-collapse: separate;
		border-spacing: 0px;
	  }
	  
	  table tr td
	  {
		padding-top: 3px;
		padding-bottom: 3px;
		padding-left:10px; 
	  }
	  
	  
    </style>
    <script type="text/javascript">
      
	  function showAboutDialog()
	  {
		$("#about-dialog").dialog('open');
	  }
	  
	  function showAddFileDialog()
	  {
		$("#add-file-dialog").dialog('open');
	  }
	  
	  function showManageCategoriesDialog()
	  {
		$("#manage-categories-dialog").dialog('open');
	  }
	  
	  
	  $(function(){
		$("#about-dialog").dialog({autoOpen:false});
		$("#about-dialog").dialog({ width: "90%" });
		$("#add-file-dialog").dialog({autoOpen:false});
		$("#add-file-dialog").dialog({ width: "760px" });
		$("#manage-categories-dialog").dialog({autoOpen:false});
		$("#manage-categories-dialog").dialog({ width: "760px" });
		$("#showaboutdialoglink").button();
		$("#showaddfiledialoglink").button();
		$('#managecategoriesdialoglink').button();
		$('#performwithselectedlink').button();
	  });	
	  
	  // TABS STATT ACCS
	  
	  $(function()
	  {
		var categories = chromeRadio.storage.getAllCategories();
		var tabno = 1;
		var tabs = document.getElementById("tabs");
		
		// lets make the tab-headers first
		var newTabDescriptor = document.createElement("ul");
		tabs.appendChild(newTabDescriptor);
		
		// first show the tab with all files
		
		newTabDescriptor.innerHTML += '<li><a href="#tabs-0" title="tabs-0">Uncategorized</a></li>';
		
		var newTab = document.createElement("div");
		newTab.id = "tabs-0";
		
		// contents ...
		
		var contents = chromeRadio.storage.getLinksInCategory(null);
		if(contents.length > 0)	{
			newTab.innerHTML += '<div class="search_div ui-corner-all">Search: <input type="text" id="search_field_0" onkeyup="chromeRadio.search.search(0,this.value);"</div><table  id="table_cat_0" style="width:100%;"> <thead style="font-weight:bold; font-size:15px;"> <tr> <th id="allNone"> <a onClick="selectAll(0);" href="#">All</a> <a onClick="selectNone(0);" href="#">None</a> </th> <th> File </th></thead><tbody id="table_cat_body_0">'+contents+'</tbody></table>';			
		} else {
			newTab.innerHTML += 'There are no files in this category.';
		}

		tabs.appendChild(newTab);
		
		// now we go by category:
		for (var i = 0; i < categories.length; i++)//category in categories) 
		{
			category = categories[i];
			// tab header:
			newTabDescriptor.innerHTML += '<li><a href="#tabs-'+tabno+'" title="tabs-'+tabno+'">'+category+'</a></li>';
			
			// tab contents:
			var newTab = document.createElement("div");
			newTab.id = "tabs-"+tabno;

			var contents = chromeRadio.storage.getLinksInCategory(category);
			if(contents.length > 0)
			{
				newTab.innerHTML += '<div class="search_div">Search: <input type="text" id="search_field_'+tabno+'" onkeyup="chromeRadio.search.search('+tabno+',this.value);"</div><table  id="table_cat_' + tabno + '" style="width:100%;">  <thead style="font-weight:bold; font-size:15px;"> <tr> <th id="allNone"> <a onClick="selectAll('+tabno+');" href="#">All</a> <a onClick="selectNone('+tabno+');" href="#">None</a> </th> <th> File </th></thead><tbody id="table_cat_body_' + tabno + '">'+contents+'</tbody></table>';			
			}
			else
			{
				newTab.innerHTML += 'There are no files in this category.';			
			}

				
				tabs.appendChild(newTab);
				tabno++;
			}

	  });
	  
	  $(function(){
        $("#tabs").tabs();
      });
	  
	  
      $(function(){
        $('#notCategorized').css('padding', '0');
        $('#allMp3s').css('padding', '0');
        $('#tableNotInCategory').width('100%');
        $('#tableAllMp3s').width('100%');
        
      });
    </script>
  </head>
  <body onload="chromeRadio.storage.initializeEverything();">

    <div id="tabs">
    </div>
	
	<div id="controls_table_wrapper" class="ui-corner-all">
	<table id="controls_table">
              <tr>
                <td style="font-size:18px; font-family:sans-serif;">
                  With Selected: 
                </td>
                <td>
                  <select id="action_select">
                  </select>
                </td>
                <td>
				  <a id="performwithselectedlink" href="#" onClick="chromeRadio.storage.performWithSelected();">OK</a>
                </td>
				<td>
					<a id="showaddfiledialoglink" href="#" onClick="showAddFileDialog();">Add File</a>
					<a id="managecategoriesdialoglink" href="#" onClick="showManageCategoriesDialog();">Manage Categories</a>
					<a id="showaboutdialoglink" href="#" onClick="showAboutDialog();">About</a>
				</td>
              </tr>
    </table>	  
	</div>
    		  
		  
		  <div id="player-wrapper" class="ui-corner-all">
		    <div id="my-radio-player-div">
              <audio id="my-radio-player" autoplay="true" src="" controls="controls">
              </audio>
            </div>
            <div id="my-radio-player-current-url" style="font-weight: normal; margin-top:5px;">
              Player stopped.
            </div>
		  </div>
		  

		  
		  <div id="manage-categories-dialog" title="Manage Categories">
	<table id="controls_table">
              <tr>
                <td>
                  Create New Category:
                </td>
                <td>
                  <input type="text" id="new_cat_textfield">
                </td>
                <td>
                  <input type="button" onClick="chromeRadio.storage.createNewCategory();" value="OK">
                </td>
			   </tr>
			   <tr>
				<td>
					Delete Category:
				</td>
				<td>
					<select id="action_select_2">
                  </select>
				</td>
				<td>
					<input type="button" onClick="chromeRadio.storage.deleteCategory();" value="OK">
				</td>
              </tr>
    </table>	 		  
		  </div>
		  
		  <div id="add-file-dialog" title="Add file">
 <form id="form_new_mp3" name="form_new_mp3">
              <p>
                Name: 
                <br/>
                <input type="text" name="mp3_name" id="mp3_name" size="100" maxlength="200">
              </p>
              <p>
                URL: 
                <br/>
                <input type="text" name="mp3_url" id="mp3_url" size="100" maxlength="200">
              </p>
              <button onclick="chromeRadio.storage.saveMp3Url()">
                Save
              </button>
              <div id="status">
              </div>
            </form>		  
		  </div>
		  
		  <div id="about-dialog"  title="About chromeRadio">
			<img src="/images/chromeRadioTitle.png" alt="chromeRadio Title" style="float:right;">
            <h2>chromeRadio Version 1.0</h2>
            <p>
              chromeRadio is an Extension for the Google Chrome Browser developed for the <a href="https://sites.google.com/site/gchromeevent/home/gtug-battle">GTUG Battle</a>
              event in Munich, Germany.
            </p>
            <h2>How To Use chromeRadio</h2>
            <p>
               chromeRadio is an extension that allows you to discover audio-files on websites you visit in seconds and play them instantly back using the Chrome Browser's built in HTML5 capabilities. It also allows you to store them in a music library and organize them using categories.
            </p>
			<p>
				Let us show you how it works. For this brief tutorial we assume the extension has been correctly activated and you see the icon in your browser-bar.
			</p>
			<p>
				<b>Step 1:</b> Go to a page that has direct links to either .mp3 or .ogg files. <a href="http://www.youlooknicetoday.com/">youlooknicetoday.com</a> is the website of a (great) podcast and we will use it in this example. As soon as the page finishes to load you should see a tiny badge appear on top of the extension-icon notifiying you of the number of files that have been found by looking at the page's HTML. It should look like this:
			</p>
			<p>
				<img src="images/pic1_discovery.png" alt="discovery 1" style="border: 1px solid #000;">
			</p>
			<p>
				Please note that this might not work 100% of the time, because of certain limitiations withing the extension API. If it doesn't it often helps to simply click on another tab and then click again on the tab that contains the music files.
			</p>
			<p>
				<b>Step 2:</b> When you click the icon you will be presented a popup that lists all the music files that have been found. In our example it's ten files. You will initially see the anchor text of the links, but since that is often not very helpful, a click on "Toggle View" will show you the actual filenames. You can now either playback those files using the "Play Instantly"-Link, or you can add them to your library so you can listen to them later. This is how it should look like on youlooknicetoday.com:
			</p>
			<p>
				<img src="images/pic2_discovery.png" alt="discovery 2" style="border: 1px solid #000;">
			</p>
			<p>
				<b>Step 3:</b> Ok, so in the next step we open the library. For this tutorial I have a library with 10 tracks from youlooknicetoday.com and 3 tracks from <a href="http://prettymuchamazing.com/">PMA</a>.
			</p>
			<p>
				<img src="images/pic4_library.jpg" alt="discovery 4" style="border: 1px solid #000;">
			</p>
			<p>
				It seems like a good idea to categorize them, so I created two categories like this and moved the files according to where they are from:
			</p>
			<p>
				<img src="images/pic5_categories.jpg" alt="discovery 5" style="border: 1px solid #000;">
			</p>
			<p>
				We hope everything is actually self-explanatory, so I'll go over the rest of the functionality briefly. 
			</p>
			<p>
				You can export and import files through the JSON-Format. The functionality is included in the drop-down box. If you delete a category, all contained files will be classified as "Uncategorized". 
			</p>
			<p>
				Finally here are some of our ideas for future development:
			</p>
			<ul>
				<li>Import of RSS-feeds for podcasts with ability to automatically add to the library and notify the user.</li>
				<li>Sorting capabilities.</li>
				<li>Support for other formats, such as videos or streaming radio.</li>
				<li>A server application that allows for simple discovery and recommendations through the extension.</li>
				<li>Drag and drop functionality for the gui.</li>
				<li>Multiple themes that users can choose from and ability to create new ones.</li>
			</ul>
            <h2>The Team</h2>
            <p>
              Three people worked on this initial version for ChromeRadio:
            </p>
            <ul>
              <li>
                <a href="mailto:jack@ubilix.com">Jakub Werner</a>
              </li>
              <li>
                <a href="mailto:dirk@dirkgomez.de">Dirk Gomez</a>
                - <a href="http://dirkgomez.de">Website</a>
              </li>
              <li>
                <a href="mailto:lukas.zielinski@gmail.com">Lukas Zielinski</a>
                - <a href="http://lukaszielinski.de">Website</a>
              </li>
            </ul>
            <p>
              We would be happy to hear from you, especially if you are planning to continue developing this extension further. :)
            </p>
            <h2>Copyright</h2>
            <p>
              The code of chromeRadio is Copyright 2010 by the original authors.
            </p>
            <p>
              chromeRadio is free software: you can redistribute it and/or modify
              it under the terms of the GNU General Public License as published by
              the Free Software Foundation, either version 3 of the License, or
              (at your option) any later version.
            </p>
            <p>
              This program is distributed in the hope that it will be useful,
              but WITHOUT ANY WARRANTY; without even the implied warranty of
              MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
              GNU General Public License for more details.
            </p>
            <p>
              You should have received a copy of the GNU General Public License 
              along with this program. If not, see <a href="http://www.gnu.org/licenses/">http://www.gnu.org/licenses/</a>.
            </p>
            <p>
              <a href="gpl.txt">Click here for the license</a>
            </p>
          </div>
		  
        </body>
        </html>

